一個音樂網頁主視覺下方會有一個最新的資訊，就讓我們來寫一個三欄式的主要資訊吧!! 預計要寫如下方所示:

首先 HTML 的程式碼如下

    <section1>
        <div class="content">
            <div class="container">
                <ul>
                    <li>
                        <h2>本週主打星</h2>
                        <img
                            src="https://images.unsplash.com/photo-1474752651386-dc296d69dc90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                        <p>
                            嚴格海外你知道不可以，水平指揮軟件執行時間這個流行依法事實上常常當前，她的威望如下上傳詢問改，更新用來情感動漫才是引，之後感興趣取得足夠加上遼寧，印象他對失望壓力看著包裝每個人，天天自從騎士引用手冊周圍期待進一步電話提前很久簡介測試運，某個一口氣採取家裡還沒有確認正確高效。<br>
                            <a href="#">(繼續閱讀...)</a>
                        </p>
                    </li>
                    <li>
                        <h2>本週排行</h2>
                        <img
                            src="https://images.unsplash.com/photo-1483412033650-1015ddeb83d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80">
                        <p>
                            我市維護不對星座損失思路擴大教，經理不用研究所接口股權不斷有，添加對此水平供求實在發現無疑研究生來看一件他也總體儘量及其德，由於習慣就在還可以因而受到時，等級上帝聽說權益追求新，下了西方因素熱線下降節省差不多藥物宣，也沒考察不可能肯定犯罪鼓勵時候依舊原來有，重大本類一份讓他印象身影進入資，先進高中。<br>
                            <a href="#">(繼續閱讀...)</a>
                        </p>
                    </li>
                    <li>
                        <h2>本週冠軍歌曲</h2>
                        <img
                            src="https://images.unsplash.com/5/unsplash-kitsune-4.jpg?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80">
                        <p>
                            對待環保訓練程度條件太陽手，創意現象統一您可以觀看便是，一下子自然太陽考生每次權利一段時間立刻反映全身男女極，在此先生有很多轉貼處罰缺乏溫度操作攻擊，自由聯繫方式海外如今是以請您地圖可能會經銷商少，職工請大家是怎麼極大流行上升來，開發近年來通道市民品種開口天然考研歐洲，醫藥長大能量開關整合列表消息上。<br>
                            <a href="#">(繼續閱讀...)</a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </section1>

因為一個網頁可能會有很多段落，所以這個三欄式先命名為 section1 未來在檢查程式碼的時候會比較好找尋段落，
在此段落中給一個 content 的標籤，表示這區塊的內容，要保持跟上方一樣的寬度，所以一樣在 content 中設定一個 container，這個 CSS 之前已經寫好了，只要在 HTML 寫下 container 標籤，就會吃到 CSS 的設定。

因為要有三欄，所以寫三個 ul>li，裡面有會有一個 h2 的標籤，分別將其命名，
也會有一張圖片，來呼應專欄的主題，一樣用 unslash 這個網站抓圖片，
在下方再給一個寫下一些觀於主題的說明，因為文字很多，在文字的最後面加上一個 a 連結，表示可以看更多內容，

再來看一下 CSS ，優化如下，說明直接寫在下方程式碼中

 .content{
        margin-top: 20px;      
        把 content 這個區塊往上推擠
        h2{
            font-size:24px;
            color: $lead-color;
            margin-bottom: 1em;
            font-weight: bold;
            text-align: center;
            標題文字設定較大的文字，再透過 SCSS 變數屬性，設定主題色，這樣如果未來要修改主題色，只要修改變數即可。
        }
        li{
          width: 31.33333%;
          margin-right: 1%;
          margin-left: 1%;
          margin-bottom: 1em;
          float: left;
          把 li 列表分成三欄，因左右推擠為 1%，所以單欄的寬度也要減少 2%， 得到的是單欄為 31.33333%，因為整體加起來要 100%， 為了不要讓瀏覽器判讀錯誤，所以在小數點後加到 5 位數，加上 float: left 讓其可以並排呈現，也就是變三欄式的樣子。
        }
        img{
          max-width: 100%;
          height: auto;
          margin-bottom: 1em;
          圖片設定最大寬為 100%，會自動配合 li 的寬度設定。
        }
        a{
          text-decoration: none;
          color: blue;
        }
    }

以上就是三欄式的寫法囉~~!!
codepen在這裡
https://codepen.io/hnzxewqw/pen/RwbQryM